<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <input type="file" name="" id="">

  <script>
    // 获取上传文件的input实例
    let inp = document.querySelector('input');
    // 定义
    const isSizeByFile = async (file) => {
      return await new Promise((resolve, reject) => {
        let _URL = window.URL || window.webkitURL;
        let img = new Image();
        img.onload = function () {
          resolve(img);
          _URL.revokeObjectURL(img.src);
        };
        // 在每次调用 createObjectURL() 方法时，都会创建一个新的 URL 对象
        // 即使你已经用相同的对象作为参数创建过。当不再需要这些 URL 对象时
        // 每个对象必须通过调用 URL.revokeObjectURL() 方法来释放
        // 使用之后应该及时释放
        img.src = _URL.createObjectURL(file);
      });
    };
    let fileChange = (e) => {
      console.log(`🚀 => fileChange => e:`, e)
      if (e.target.files[0].size > 2 * 1024 * 1024) {
        console.error('上传单个封面大小不能超过 2M!');
      } else {
        let file = e.target.files[0];
        const canvas = document.createElement('canvas')
        const context = canvas.getContext('2d')
        isSizeByFile(file).then((img) => {
          // 设置宽高度为等同于要压缩图片的尺寸
          canvas.width = img.width
          canvas.height = img.height
          context.clearRect(0, 0, img.width, img.height)
          //将img绘制到画布上
          context.drawImage(img, 0, 0, img.width, img.height)
          document.querySelector('body').appendChild(canvas)
        })
        let reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function (result) {
          console.log('@result', result.target.result)
        }
      }
    }
    inp.addEventListener('change', fileChange);
  </script>
</body>

</html>